<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登录</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<script src="js/immersed.js"></script> 
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				border: 0;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				-webkit-tap-highlight-color: transparent;
			}
			
			input {
				-webkit-appearance: none;
				/* 娓呴櫎ios鍐呴槾褰� */
			}
			
			html,
			body {
				width: 100%;
				background-color: #fff;
				overflow-y: hidden;
			}

			
			.header {
				background-image: url(images/banner_bg.jpg);
				background-repeat: no-repeat;
				background-position: center center;
				background-size:  auto 100%;
				text-align: center;
				padding: 70px 0;
			}
			
			.logo {
				width: 40%;
			}
			
			#login {
				padding: 20px 20px;
			}
			
			.yiui-phone-input {
				border: #ccc 1px solid;
				height: 50px;
				line-height: 30px;
				font-size: 16px;
				width: 100%;
				border-radius: 5px;
				background-color: #fff;
				text-indent: 40px;
			}
			
			.yiui-phone-input:focus {
				border: #999 1px solid;
				outline: none;
			}
			
			.yiui-input-row {
				justify-content: center;
				position: relative;
				margin: 10px 0;
				height: 50px;
			}
			.yiui-input-row .sicon{
				position: absolute;
				left: 10px;
				top: 7px;
				font-size:25px;
				color:#999
			}
			.yiui-input-row .reloadverify{
				position: absolute;
				right: 1px;
				top: 1px;
				height: 48px;
				border-radius: 5px;
			}
			
			.next {
				background-color: #45A75C;
				color: #fff;
				display: block;
				width: 100%;
				height: 50px;
				border-radius: 5px;
				font-size: 16px;
			}
			
			.next:focus {
				outline: none;
			}
			
			.next.disabled {
				background-color: #91ac97;
				color: #666
			}
			.back {
				background-color: #fff;
				color: #333;
				display: block;
				width: 100%;
				height: 50px;
				border-radius: 5px;
				font-size: 14px;
			}
			
			.back:focus {
				outline: none;
			}
		</style>

	</head>

	<body>
		<div id="content">
			<div class="header">
				<img src="images/logo.png" class="logo">
			</div>
			<div id="login">
				<div class="yiui-input-row">
					<i class="iconfont icon-keyboard sicon"></i>
					<input type="tel" value="" id="code" name="sms" placeholder="短信验证码" class="yiui-phone-input">
				</div>

				<div class="yiui-input-row" style="margin-top: 10px;">
					<button id='submitBtn' class="next">登录</button>
				</div>
				<div class="yiui-input-row" style="margin-top: 10px;">
					<button class="back mui-action-back">返回</button>
				</div>
				
				<div style="margin-top: 30px;">
					<p style="font-size: 12px;color:#999;text-align: center;">聚石云库已给你发送了短信验证码<br />如长时间没有收到，请返回重新发送</p>
				</div>
			</div>
	
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/common.js"></script>
		<script src="js/update.app.js"></script>
		<script>
			mui.init({
				swipeBack:false
			});
			
			
			
			mui.plusReady(function() {
				
				
			var phone = getUrlParam('phone');
			
			$(document).on('click', '#submitBtn', function(e) {
				var _phone = phone;
				var _code = $("#code").val();
				var _data = {
					phone: _phone,
					sms: _code
				}
				$("#submitBtn").html("登录中...").attr('disabled', true).addClass('disabled');
				Get(SERVER_URL+'&c=Public&a=smsLogin', _data, function(data) {
						$("#submitBtn").html("登录").attr('disabled', false).removeClass('disabled');
						if(data.status) {
							Smarge.set('userinfo',data.info)
							clicked('main.html','pop-in');
							mui.toast('登录成功')
						} else {
							mui.alert(data.info);
						}
					});
			});
			
			
			
		});


		</script>
	</body>

</html>